<template>
  <div class="search">
    <!-- 顶部搜索结果 -->
    <div class="title">
      <span class="keywords">{{ route.params.keywords }}</span>
      <span class="tag">搜索结果</span>
    </div>
    <!-- tab栏 -->
    <Tabs :tabs="tabs" class="tabs"></Tabs>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()

const tabs = [
  {
    label: '单曲',
    name: 'searchSongs',
    path: '/search/songs',
  },
  {
    label: '歌手',
    name: 'searchSinger',
    path: 'search/singer',
  },
  {
    label: '歌单',
    name: 'searchPlaylist',
    path: 'search/playlist',
  },
  {
    label: 'MV',
    name: 'searchMV',
    path: 'search/video',
  },
]



</script>

<style scoped lang="less">
.search {
  .title {
    cursor: default;
    width: 50%;
    padding: 0.5rem 0;
    margin: 2rem auto;
    margin-bottom: 1rem;
    font-size: 20px;
    text-align: center;
    border: 2px solid rgb(235, 66, 66);
    border-radius: 1rem;

    .keywords {
      margin-right: 1rem;
      color: #e33737;
      font-weight: 700;
    }

    .tag {
      color: #444;
    }
  }
  .tabs{
    margin-left: 30px;
  }
}
</style>